<template>
  <div>
    <!-- <link media="screen and (max-device-width:1280px)">
    <link media="screen and (min-device-width:1280px)"> -->
    <div class="page-title">问题查询</div>
    <div class="page-content">
      <el-form
        :inline="true"
        :model="filterQuery"
        @submit.native.prevent="handleSearch"
        label-position="right"
        label-width="80px">
        <el-row>
          <el-col>
            <el-form-item label="被检单位">
              <treeselect
              :multiple="false"
              :options="options"
              placeholder="请选择受检单位"
              v-model="filterQuery.companyCode"
              style="width:280px"
              :searchable="false"
              /> 
            </el-form-item>
            <el-form-item label="检查日期">
              <el-date-picker
              v-model="dateRange"
              type="daterange"
              align="right"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              style="width:280px">
              </el-date-picker>
            </el-form-item> 
            </el-col>
            <el-col>
            <el-form-item label="问题类型">
              <el-select style="width:280px" v-model="filterQuery.problemType" placeholder="选择类型" clearable>
              <el-option v-for="item in types" :key="item.id" :label="item.hazardFactor" :value="item.hazardFactor"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="问题程度">
              <el-select style="width:280px" v-model="filterQuery.problemRank" placeholder="选择程度" clearable>
              <el-option v-for="item in ranks" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col>
            <!--el-form-item label="问题要素">
              <el-select style="width:280px" v-model="filterQuery.hseFactor" placeholder="选择要素" clearable>
              <el-option v-for="item in factors" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item-->
            <el-form-item label="问题状况">
              <el-select style="width:280px" v-model="filterQuery.status" placeholder="选择状况" clearable>
              <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="问题原因">
              <el-select style="width:280px" v-model="filterQuery.problemSource" placeholder="选择原因" clearable>
              <el-option v-for="item in problemSources" :key="item.id" :label="item.name" :value="item.name" style="width:280px"></el-option>
              </el-select>
            </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="用工性质">
              <el-select style="width:280px" v-model="filterQuery.employmentProperty" placeholder="选择性质" clearable>
              <el-option v-for="item in eproperties" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="岗位工龄">
              <el-select style="width:280px" v-model="filterQuery.workingAge" placeholder="选择工龄" clearable>
              <el-option v-for="item in ages" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            </el-col>
        </el-row>
        <el-row>
          <el-col>
            
            <el-form-item label="违章人员">
              <el-select style="width:280px" v-model="filterQuery.responsePersonID" placeholder="选择人员" filterable  clearable>
              <el-option v-for="item in employees" :key="item.employeeID" :label="item.name" :value="item.employeeID"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="监督轮次">
         <el-input
         placeholder="输入轮次"
         v-model="filterQuery.round"
         style="width:280px"
         >
    </el-input>
            </el-form-item>
            <!--el-form-item label="监督员 " >
              <el-select style="width:280px" v-model="filterQuery.checkStaffID" placeholder="选择监督员" filterable clearable>
              <el-option v-for="item in supervisors" :key="item.staffID" :label="item.staffName" :value="item.staffID"></el-option>
              </el-select>
            </el-form-item-->
            </el-col>
        </el-row>
        
        <el-row>
          <el-col>
            
            <el-form-item label="岗位">
              <el-select style="width:280px" v-model="filterQuery.workingName" placeholder="选择岗位" clearable>
              <el-option v-for="item in names" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" native-type='submit' icon='el-icon-search'>查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button style="background-color:#3399CC;color:#FFFFFF;width:100%" @click="export2Excel">导出Excel</el-button>
            </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <el-table
    :data="tableData"
    v-loading="loading"
    border
    @row-click="clickTable"
    ref="refTable"
    style="width: 100%">
     <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand" label-width="140px">
          <el-row>
            <el-col :span="7">
           <el-form-item label="受检单位：">{{ props.row.parentCompanyName}}</el-form-item>
           </el-col>
           <el-col :span="7">
             <el-form-item label="受检基层单位：">{{ props.row.basicCompanyName }}</el-form-item>
          </el-col>
          </el-row>
          <el-row>
           <el-col :span="7">
           <el-form-item label="检查时间：">{{ props.row.checkDate }}</el-form-item>
           </el-col>
           <el-col :span="17">
             <el-form-item label="受检三级单位">{{ props.row.companyName}}</el-form-item>
          </el-col>
          </el-row>
          <el-row>
           <el-col :span="7">
             <el-form-item label="检查地点：">{{ props.row.checkStation}}</el-form-item>
          </el-col>
          <el-col :span="17">
                <el-form-item  label="检查项目：">{{ props.row.checkItem }}</el-form-item>
              </el-col>
          </el-row>
          <el-row>
              
              <el-col :span="17">
                <el-form-item  label="检查表：">{{ props.row.checkListName }}</el-form-item>
              </el-col>
            </el-row>
          
            <el-row :span="24">
              <el-col :span="24">
                <el-form-item  label="检查项：">{{ props.row.checkListItemName}}</el-form-item>
              </el-col>
            </el-row>
          
            
              <el-row>
              <el-col :span="24">
                <el-form-item  label="问题描述：">{{ props.row.description}}</el-form-item>
              </el-col>
            </el-row>
            
            <el-row>
              <el-col :span="7">
           <el-form-item label="安全绩效扣分:">{{ props.row.lostScore }}</el-form-item>
           </el-col>
              <el-col :span="17">
           <el-form-item label="问题原因：" >{{ props.row.problemSource }}</el-form-item>
           </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
            <el-form-item label="依据标准：" >{{ props.row.problemGist }}</el-form-item>
          </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
                <el-form-item label="问题程度：" >{{ props.row.problemRank }}</el-form-item>
              </el-col>
              <el-col :span="17">
                <el-form-item  label="问题类型：">{{ props.row.problemType }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
                <el-form-item label="问题体系要素：">{{props.row.hseFactor}}</el-form-item>
            </el-row>
          <el-row>
            <el-col :span="7">
            <el-form-item label="责任人：">{{ props.row.responsePersonName }}</el-form-item>
          </el-col>
            <el-col :span="17">
           <el-form-item label="岗位名称：" >{{ props.row.workingName }}</el-form-item>
           </el-col>
            
          </el-row>
           
          <el-row>
            <el-col :span="7">
           <el-form-item label="用工性质：" >{{ props.row.employmentProperty }}</el-form-item>
           </el-col>
           <el-col :span="17">
            <el-form-item label="岗位工龄：">{{ props.row.workingAge }}</el-form-item>
          </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="整改责任人：">{{props.row.supervisorName}}</el-form-item>
            </el-col>
          </el-row>
           <el-form-item label="问题附件："></el-form-item>
                <el-row >
                <el-col :span="2">
                  <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="props.row.checkAttach1 !==''">
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width:600px;height:auto"><img :src="props.row.checkAttach1" style="max-width:600px;height:auto"/></div>
                    <img slot="reference" :src="props.row.checkAttach1" :alt="props.row.checkAttach1" style="max-height: 240px">
                  </el-popover><br/>
                </el-card>
                </el-col>
                <el-col :span="2">
                <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="props.row.checkAttach2 !==''">
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width:600px;height:auto"><img :src="props.row.checkAttach2" style="max-width:600px;height:auto"/></div>
                    <img slot="reference" :src="props.row.checkAttach2" :alt="props.row.checkAttach2" style="max-height: 240px">
                  </el-popover><br/>
                </el-card>
                </el-col>
                <el-col :span="2">
                   <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="props.row.checkAttach3 !==''">
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width:600px;height:auto"><img :src="props.row.checkAttach3" style="max-width:600px;height:auto"/></div>
                    <img slot="reference" :src="props.row.checkAttach3" :alt="props.row.checkAttach3" style="max-height: 240px">
                  </el-popover><br/>
                </el-card>
                </el-col>
                <el-col :span="2">
                   <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="props.row.checkAttach4 !==''">
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width:600px;height:auto"><img :src="props.row.checkAttach4" style="max-width:600px;height:auto"/></div>
                    <img slot="reference" :src="props.row.checkAttach4" :alt="props.row.checkAttach4" style="max-height: 240px">
                  </el-popover><br/>
                </el-card>
                </el-col>
                <el-col :span="2">
                  <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="props.row.checkVideo !==''">
                   <video width="100%" height="230" controls>
                  <source :src="props.row.checkVideo" type="video/mp4">
                </video>
                </el-card>
                </el-col>
              </el-row>


          <div v-for="(itemy,i) in props.row.children" :key="i" id="recDiv" >
            
          <div v-if="itemy.rectDate!==''">
          <div style="height:30px"></div>
          <hr/>
          <div style="height:20px"></div>
           <el-row >
             <el-col :span="7">
           <el-form-item label="整改时间:" id="rda">{{ itemy.rectDate }}</el-form-item>
           </el-col>
             <el-col :span="17">
           <el-form-item label="整改效果:">{{ itemy.rectEffect }}</el-form-item>
           </el-col>
          </el-row>
          
          <el-row>
            <el-col :span="7">
            <el-form-item label="整改责任人：" >{{ itemy.supervisorName }}</el-form-item>
          </el-col>
          <el-col :span="17" >
           <el-form-item label="整改描述:">{{ itemy.rectDescription }}</el-form-item>
           </el-col>
           </el-row>

           <el-row>
          <el-col :span="24" >
           <el-form-item label="整改文档:"><a :href="itemy.rectFile" target="_blank" rel="noopener noreferrer">{{ itemy.rectFile }}</a></el-form-item>
           </el-col>
           </el-row>

          
           <el-form-item label="整改附件："></el-form-item>
                <el-row >
                <el-col :span="2">
                  <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="itemy.rectAttach1 !==''">
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width:600px;height:auto"><img :src="itemy.rectAttach1" style="max-width:600px;height:auto"/></div>
                    <img slot="reference" :src="itemy.rectAttach1" :alt="itemy.rectAttach1" style="max-height: 240px">
                  </el-popover><br/>
                </el-card>
                </el-col>
                <el-col :span="2">
                    <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="itemy.rectAttach2 !==''">
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width:600px;height:auto"><img :src="itemy.rectAttach2" style="max-width:600px;height:auto"/></div>
                    <img slot="reference" :src="itemy.rectAttach2" :alt="itemy.rectAttach2" style="max-height: 240px">
                  </el-popover><br/>
                </el-card>
                </el-col>
                <el-col :span="2">
                   <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="itemy.rectAttach3 !==''">
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width:600px;height:auto"><img :src="itemy.rectAttach3" style="max-width:600px;height:auto"/></div>
                    <img slot="reference" :src="itemy.rectAttach3" :alt="itemy.rectAttach3" style="max-height: 240px">
                  </el-popover><br/>
                </el-card>
                </el-col>
                <el-col :span="2">
                   <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="itemy.rectAttach4 !==''">
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width:600px;height:auto"><img :src="itemy.rectAttach4" style="max-width:600px;height:auto"/></div>
                    <img slot="reference" :src="itemy.rectAttach4" :alt="itemy.rectAttach4" style="max-height: 240px">
                  </el-popover><br/>
                </el-card>
                </el-col>
                <el-col :span="2">
                  <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="itemy.rectVideo !==''">
                   <video width="100%" height="230" controls>
                  <source :src="itemy.rectVideo" type="video/mp4">
                </video>
                </el-card>
                </el-col>
              </el-row>
              </div> 
               </div> 

               
               <el-row>
                 <el-col :span="7">
                <el-form-item label="验证人：">{{ props.row.verifyPersonName }}</el-form-item>
              </el-col>
              <el-col :span="17">
                <el-form-item label="验证时间：">{{ props.row.verifyDate }}</el-form-item>
              </el-col>
            </el-row>
        </el-form>
      </template>
    </el-table-column>
    
     <el-table-column
      label="轮次"
      prop="round"
      header-align="center"
      width="80px">
    </el-table-column>
     <el-table-column
      label="日期"
      prop="checkDate"
      header-align="center"
      width="100px">
    </el-table-column>
     <el-table-column
      label="单位"
      prop="parentCompanyName"
      header-align="center"
      width="120px">
    </el-table-column>
    <el-table-column
      label="基层单位"
      prop="basicCompanyName"
      header-align="center"
      width="120px">
    </el-table-column>
    <el-table-column
      label="班组"
      prop="companyName"
      header-align="center"
      width="120px">
    </el-table-column>
    <el-table-column
      label="检查地点"
      prop="checkStation"
      header-align="center"
      width="120px">
    </el-table-column>
    <el-table-column
      label="检查类型"
      prop="checkType"
      header-align="center">
    </el-table-column>
    <el-table-column
      label="问题类型"
      prop="problemType"
      header-align="center"
      width="150px">
    </el-table-column>
    <el-table-column
     label="问题体系要素"
     prop="hseFactor"
     header-align="center"
     width="150px">
    </el-table-column>
    <el-table-column
      label="问题原因"
      prop="problemSource"
      header-align="center"
      width="100px">
    </el-table-column>
    <el-table-column
      label="问题描述"
      prop="description"
      header-align="center"
      width="180px">
      <template slot-scope="scope">
        <span>{{scope.row.description | ellipsis}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="整改责任人"
      prop="supervisorName"
      header-align="center"
      width="100px">
    </el-table-column>
    <el-table-column
      label="检查人"
      prop="checkPerson"
      header-align="center"
      width="80px">
    </el-table-column>
    <el-table-column
      label="问题程度"
      prop="problemRank"
      header-align="center"
      width="100px">
    </el-table-column>
    <!--el-table-column
      label="涉及要素"
      prop="hseFactor"
      header-align="center"
      width="100px">
    </el-table-column-->
    <el-table-column
      label="违章人员"
      prop="responsePersonName"
      header-align="center"
      width="100px">
    </el-table-column>
    <!--el-table-column
      label="用工性质"
      prop="employmentProperty"
      header-align="center"
      width="100px">
    </el-table-column-->
    <el-table-column
      label="岗位"
      prop="workingName"
      header-align="center"
      width="80px">
    </el-table-column>
    <el-table-column
      label="岗位工龄"
      prop="workingAge"
      header-align="center"
      width="100px">
    </el-table-column>
    <el-table-column
      label="用工形式"
      prop="employmentProperty"
      header-align="center">
    </el-table-column>
    <el-table-column
      label="安全绩效扣分"
      prop="lostScore"
      header-align="center"
      width="120px">
    </el-table-column>
    <el-table-column
      label="问题状况"
      prop="status"
      header-align="center"
      width="100px">
    </el-table-column>
    <!--el-table-column label="操作" align="center" header-align="center" width="120px">
        <template slot-scope="scope">
          <div class="inline-td">
            &nbsp;&nbsp;&nbsp;
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </div>
        </template>
    </el-table-column-->
  </el-table>
  <div class="pagination-base">
        <el-pagination
          @current-change="handlePageChange"
          :current-page="filterQuery.pageIdx"
          :page-size="filterQuery.pageSize"
          :total="total"
          background
          layout="total, prev, pager, next, jumper">
        </el-pagination>
    </div>
    </div>
  </div>
</template>

<script>


import {GetDictionary,GetEmployee,GetSupervisor,GetProblemType} from '../../../services/cq_gettreedata'
import {DeleteProblem} from '../../../services/cq_gettreedata'
import {GetProblemList1} from '../../../services/cq_gettreedata'
import Treeselect from '@riophae/vue-treeselect'
//import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {GetCompany} from '../../../services/cq_gettreedata'



const DefaultQuery = {
  //taskName: '',
  companyCode: null,
  checkDate1: '',
  checkDate2: '',
  // problemRepeat: '',
  round:'',
  checkStaffID:'',
  responsePersonID:'',
  problemType:'',
  problemRank: '',
  hseFactor:'',
  workingName:'',
  workingAge:'',
  employmentProperty:'',
  problemSources:'',
  status:'',
  pageIdx: 1,
  pageSize: 10
}
const DefaultQueryExcel = {
  //taskName: '',
  companyCode: null,
  checkDate1: '',
  checkDate2: '',
  round:'',
  checkStaffID:'',
  responsePersonID:'',
  problemSources:'',
  problemType:'',
  problemRank: '',
  hseFactor:'',
  workingName:'',
  workingAge:'',
  employmentProperty:'',
  status:'',
  // pageIdx: 1,
  // pageSize: 10,
  type:'all'
}

export default {
  components: { Treeselect },
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 20) {
        return value.slice(0,20) + '...'
        }
        return value
    }
  },
  data () {
    return {
      pid:0,
      filterQuery: {},
      fitertask: {},
      taskAyy: '',
      taskNameList: [],
      taskNameList1:[],
      loading: false,
      tableData: [],
      timeout: null,
      dateRange:[],
      total: 0,
      options: [],
      types:[],
      employees:[],
      repeats:[],
      status:[],
      indexStartNum:1,
      ranks:[],
      factors:[],
      rounds:[],
      supervisors:[],
      ages:[],
      names:[],
      eproperties:[],
      recHis:[],
      rectFile:[],
      problemSources:[]
    }
  },

  mounted() {
    this.loadFilterParams()
    this.gettaskName()
    this.handleGetListData() 
    this.getDate()
    this.getTypes()
    // this.getrepeats()
    this.getStatusDict()
    //this.handleDelete()
    this.getRanks()
    this.getFactors()
    this.getRounds()
    this.getSupervisors()
    this.getAges()
    this.getNames()
    this.getEproperties()
    this.getEmployees()
    this.getSource()
  },
  methods:{
    getSource(){
      GetDictionary({name: '问题原因'}).then((res) => {
        this.problemSources = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },


      handleGetRechistory(res){
        // debugger
        for (var i = 0;i<res.data.list.length;i++){
        this.recHis[res.data.list[i].checkRecordID] = []
        for (var j = 0;j<res.data.list.length;j++){
            if(res.data.list[i].checkRecordID === res.data.list[j].checkRecordID){
                this.recHis[res.data.list[i].checkRecordID].push(res.data.list[j])
          }
        }
       }
    },

    

    handleRecfile(res){
        
       for(var i=0;i<res.data.list.length;i++){
         for(var j=0;j<res.data.list[i].children.length;j++){
           if(res.data.list[i].children[j].rectFile==null || res.data.list[i].children[j].rectFile== undefined || res.data.list[i].children[j].rectFile== '')
           {
             
             res.data.list[i].children[j].rectFile="#"
           }
         }
       }
    },

    getEmployees(){
      GetEmployee({type: 'all'}).then((res) => {
        //console.info('违章人员',res.data)
        this.employees = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    getRanks(){
      GetDictionary({name: '隐患等级'}).then((res) => {
        this.ranks = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },

    getFactors(){
      GetDictionary({name: '问题要素'}).then((res) => {
        this.factors = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },

    getRounds(){
      GetDictionary({name: '监督轮次'}).then((res) => {
        this.rounds = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },

    getSupervisors(){
      GetSupervisor().then((res) => {
        this.supervisors = res.data.list
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },

    getAges(){
      GetDictionary({name: '岗位工龄'}).then((res) => {
        this.ages = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },

    getNames(){
      GetDictionary({name: '岗位'}).then((res) => {
        this.names = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },

    getEproperties(){
      GetDictionary({name: '员工组'}).then((res) => {
        this.eproperties = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },

    getTypes(){
      GetProblemType().then((res) => {
        //debugger
        //console.info('res',res.data)
        this.types = res.data
      }).catch((err) => {
        //debugger
        this.$message.error(err.message)
      })
    },

    getStatusDict () {
      GetDictionary({name: "问题状况", type: "all"}).then((res) => {
        this.status = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    getDate(){
          GetCompany().then((res) => {
            this.options = res.data 
          }).catch((err) => {
            this.$message.error(err.message)
          })
      },
      handleDelete (item) {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteProblem(item.id).then(() => {
          this.handleGetListData()
        }, (err) => {
          this.$message.error(err.message)
        })
      }).catch(() => {
      })
    },
      export2Excel() {
      this.filterQueryExcel = {...DefaultQueryExcel, ...this.$route.query}
      this.filterQueryExcel = {
        ...this.filterQueryExcel,
      }
      this.filterQueryExcel = JSON.parse(JSON.stringify(this.filterQuery))
      delete this.filterQueryExcel.pageIdx
      delete this.filterQueryExcel.pageSize
      this.filterQueryExcel.type = 'all'
      this.excelData=GetProblemList1(this.filterQueryExcel).then((data) => {
        this.excelData = data.data
        this.loading = false
        require.ensure([], () => {
          const { export_json_to_excel } = require('../../../vendor/Export2Excel');
          const tHeader = ['轮次','日期','单位','基层单位','班组','问题类型','问题原因','问题描述','检查人'
          ,'问题程度','涉及要素','违章人员','用工性质','岗位工龄','岗位','安全绩效扣分：','问题状况'];
          // 上面设置Excel的表格第一行的标题
          const filterVal = ['round','checkDate','parentCompanyName','basicCompanyName','companyName','problemType','problemSource'
          ,'description','checkPerson','problemRank','hseFactor','responsePersonName','employmentProperty','workingAge',
          'workingName','lostScore','status'];
          // 上面的index、phone_Num、school_Name是tableData里对象的属性
          const list = this.excelData.list;  //把data里的tableData存到list
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '列表excel');
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    gettaskName(){
        GetProblemList1(this.fitertask).then((res) => {  
        this.taskAyy = res.data.list 
        for(var i=0;i<this.taskAyy.length;i++){
            this.taskNameList1.push({"value": this.taskAyy[i].taskName})
        }
        var hash = {};
          this.taskNameList = this.taskNameList1.reduce(function(item, next) {
          hash[next.value] ? '' : hash[next.value] = true && item.push(next);
          return item
         }, [])
        this.loading = false
      }).catch((err) => {
        this.$message.error(err.message)

      })
      },
      clickTable(row){
           this.$refs.refTable.toggleRowExpansion(row)
      },
      handleSearch () {
        
      this.filterQuery.pageIdx = 1
      this.handleGetListData()
    },
      checkFilterParams () {
        // debugger
        //datepicker range 绑定的数据是数组,需要拆成后端识别的2个参数
        if (this.dateRange && this.dateRange.length === 2) {
          this.filterQuery.checkDate1 = this.dateRange[0]+' '+'00:00:00'
          this.filterQuery.checkDate2 = this.dateRange[1]+' '+'23:59:59'
          } else {
            this.filterQuery.checkDate1 = ''
            this.filterQuery.checkDate2 = ''
          }
        },
      loadFilterParams () {
          //从query读取过滤条件
          this.filterQuery = {...DefaultQuery, ...this.$route.query}
          //从query中取到的参数是string的,要转成element要求的number
          this.filterQuery = {...this.filterQuery,
          pageIdx: parseInt(this.filterQuery.pageIdx, 10),
          pageSize: parseInt(this.filterQuery.pageSize, 10),
          }
          //填充datepicker range组件的内容
          if (this.filterQuery.checkDate1 && this.filterQuery.checkDate2) {
            this.dateRange = [this.filterQuery.checkDate1, this.filterQuery.checkDate2]
            }
          },
      querySearch(queryString, cb) {
        let results = queryString ? this.taskNameList.filter(this.createStateFilter(queryString)) : this.taskNameList;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 1000 * Math.random());
      },
      handleGetListData () {
      this.checkFilterParams()
      this.loading = true
      //为了保存过滤条件,我们通过路由的history能力,更换url,从子页面返回的时候,能还原当前条件下的内容
      //this.$router.push({query: this.filterQuery})
      //接口函数,then后面的回调表示成功所执行的内容,catch后面表示错误时所执行的内容
      // this.filterQuery.round = this.filterQuery.round === "" ? 0 : +this.filterQuery.round
      //this.filterQuery.responsePersonID = 0
      // delete this.filterQuery.pageIdx
      // delete this.filterQuery.pageSize
      // debugger
      GetProblemList1(this.filterQuery).then((res) => {
        this.handleGetRechistory(res)
        // this.handleRecfile(res)
        // console.log(this.recHis)
        // console.log(res.data.list)
        // console.log(typeof(res.data.list[0].children[0].rectFile))
        this.tableData = res.data.list
        this.total = res.data.total
        this.filterQuery.pageIdx = res.data.page
        this.indexStartNum = ((this.filterQuery.pageIdx - 1) * this.filterQuery.pageSize) + 1;
        this.loading = false
      }).catch((err) => {
        this.$message.error(err.message)
        this.loading = false
      })
    },
    handlePageChange (page) {
      this.filterQuery.pageIdx = page
      this.handleGetListData()
    },
      createStateFilter(queryString) {
        return (taskName) => {
          return (taskName.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1); 
        };
      }
  }
}
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>